<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥狮-电子宠物</title> 
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body>
    
    <div id="app">  
        <h1>电子宠物蓝桥狮</h1>
		<div class="top">
            <div class="left">

            </div>
            <div class="right">
                <div class="infos">
                    <div class="form-group">
                        <label for="name">宠物昵称</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入宠物昵称" aria-describedby="inputSuccess2Status">
                        <span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
                    </div>
                     
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-primary active">
                          <input type="radio" name="options" id="option1" checked> 穿衣服
                        </label>
                        <label class="btn btn-primary">
                          <input type="radio" name="options" id="option2"> 不穿衣服
                        </label> 
                    </div>
                    <div class="weight">
                        <span>60</span>
                        kg
                    </div> 
                </div>
            </div>
        </div>
        <div class="btns">
            <button type="button" class="btn btn-success">吃零食，增加体重1kg</button> 
            <button type="button" class="btn btn-warning">跟它玩，减轻体重2kg</button>
        </div>
        <div id="console">
            <fieldset>
                <legend>行动记录</legend>
            </fieldset>
            <div class="list">XX在09:34分，吃了零食，体重+1kg</div>
            <div class="list">XX在09:34分，吃了零食，体重+1kg</div>
        </div>
    </div> 
    <script> 
	    // 获取DOM元素对象
		 class Lion {
            constructor(weight) {
                this.type = '狮子';
                this.weight = weight;
            }

         }
         class MyPet extends Lion {
            constructor(name, haveClothes, weight = 60) {
                super(weight)
                this.name = name; 
                this.haveClothes = haveClothes;  
            }
         }
         const pet = new MyPet('oo',true)
         console.log('pet',pet);
         
    </script>
  </body>
</html>
